<template>
  <div class="gva-table-box">
    <div class="gva-btn-list search-form" style="padding-top: 80px;">
      <el-form ref="formRef" :model="GoodsInfo" style="width: 100%;">
        <el-row :gutter="20" class="flex">
          <el-col :span="5">
            <el-form-item label="产品名称" prop="global_order_no">
              <el-input clearable v-model="GoodsInfo.product_name" placeholder="产品名称" style="width: 100%" />
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="SKU" prop="global_order_no">
              <el-input clearable v-model="GoodsInfo.sku" placeholder="sku" style="width: 100%" />
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item>
              <el-button type="primary" icon="Search" class="action" style="margin-left: 20px;"
                @click="getsearch">搜索</el-button>
              <el-button class="action reset" @click="resetForm()">重置搜索</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div>
      <div>
        <el-table :data="dataList" row-key="ID" 
        :row-class-name="tableRowClassName"
        style="height: 480px;"
        v-loading="loading"
        >
          <el-table-column align="center" label="序" min-width="75">
            <template #default="scope">
              <span>{{ (page - 1) * pageSize + scope.$index + 1 }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="产品ID" min-width="200" prop="product_id" />
          <el-table-column align="center" label="产品名称" min-width="200" prop="product_name" />
          <el-table-column align="center" label="产品图片" min-width="120" prop="pic_url">
            <template #default="scope">
              <el-image style="width: 60px; height: 60px;z-index: 999;" :zoom-rate="1.2" :max-scale="7" :min-scale="0.2"
                preview-teleported='true' :src="scope.row.pic_url" :preview-src-list="[scope.row.pic_url]"
                fit="cover" />
            </template>
          </el-table-column>
          <el-table-column align="center" label="SKU" min-width="200" prop="sku" />
          <el-table-column align="center" label="分类" min-width="200" prop="category_name" >
          </el-table-column>
          <el-table-column align="center" label="品牌" min-width="200" prop="brand_name" >
          </el-table-column>
          <el-table-column align="center" label="SPU" prop="spu" />
          <el-table-column align="center" label="运输成本" min-width="160" prop="cg_transport_costs" />
          <el-table-column align="center" label="采购成本" min-width="160" prop="cg_price" />
          <el-table-column align="center" label="状态" min-width="160" prop="status_text" />
          <el-table-column align="center" label="更新时间" min-width="200" prop="update_time">
            <template #default="scope">
              {{gettime(scope.row.update_time)}}
            </template>
          </el-table-column>
          <el-table-column align="center" label="添加时间" min-width="200" prop="create_time">
            <template #default="scope">
              {{gettime(scope.row.create_time)}}
            </template>
          </el-table-column>
        </el-table>
        <div class="gva-pagination">
          <el-pagination v-model:current-page="page" v-model:page-size="pageSize" :total="total"
            :page-sizes="[10, 20, 30, 40]" layout="prev, pager, next, jumper, total, sizes"
            @size-change="handleSizeChange" @current-change="handleCurrentChange" />
        </div>
      </div>
    </div>
  </div>

</template>

<script setup>
import { ref, reactive,watch } from 'vue'
import { lxgoodslist } from '@/api/product'
import { useRoute, useRouter } from 'vue-router'
defineOptions({
  name: 'LxGoods'
})

const route = useRoute()
const router = useRouter()
// 获取产品列表
const dataList = ref([])
const page = ref(1)
const pageSize = ref(10)
const total = ref(0)
const query = route.query
const loading = ref(false)

const GoodsInfo = reactive({
  product_name: '',
  sku:''
})
const gettime = (shijianchuo)=>
{
  if(!Number(shijianchuo)){
    return '- -';
  }
//shijianchuo是整数，否则要parseInt转换
var time = new Date(Number(shijianchuo*1000));
var y = time.getFullYear();
var m = time.getMonth()+1;
var d = time.getDate();
var h = time.getHours();
var mm = time.getMinutes();
var s = time.getSeconds();
return y+'-'+add0(m)+'-'+add0(d)+' '+add0(h)+':'+add0(mm)+':'+add0(s);
}
function add0(m){return m<10?'0'+m:m }

const getGoodsData = async (requestdata) => {
  requestdata.PageIndex = page.value;
  requestdata.PageSize = pageSize.value;
  loading.value = true
  lxgoodslist(requestdata).then((res) => {
    loading.value = false

    if (res.errcode == 0) {
      dataList.value = res.content
      total.value = Number(res.totalRecords)
    }
  });
}
getGoodsData(GoodsInfo)
const getsearch = async () => {
  page.value = 1;

  getGoodsData(GoodsInfo)
}

const handleCurrentChange = (num) => {
  page.value = num
  getGoodsData(GoodsInfo)
}

const handleSizeChange = (num) => {
  pageSize.value = num
  getGoodsData(GoodsInfo)
}
const formRef = ref();
const resetForm = ()=>{
  formRef.value.resetFields();
getGoodsData(GoodsInfo)

}
const tableRowClassName=({row, rowIndex}) =>{
      // 通过rowIndex判断奇偶行，添加不同的类名
      if (rowIndex % 2 === 0) {
        return 'even-row';
      } else {
        return 'odd-row';
      }
    }
</script>

<style lang="scss" scoped>
.balanceTitle{
  font-size: 20px;
  margin-bottom: 20px
}
.activetitle{
  color: red;
  margin-left:12px
}
.red{
  color: red
}
.demo-image__error .image-slot {
  font-size: 30px;
}

.demo-image__error .image-slot .el-icon {
  font-size: 30px;
}

.demo-image__error .el-image {
  width: 100%;
  height: 200px;
}

.gva-table-box {
  margin: 20px;
}

:deep(.el-input__inner) {
  font-size: 12px !important;
  color: rgba(0, 0, 0, .85) !important;

}

:deep(.el-select__wrapper) {
  font-size: 12px !important;

  .el-select__selected-item {
    font-size: 12px !important;
  }

}

.logo-img {
  width: 46px;
}
</style>

<style lang="scss">
:deep(.el-form-item) {
  align-content: center;
}
</style>
